<template>
  <div class="app-container">
    <el-form :model="pd.queryParams" ref="queryRef" :inline="true" v-show="pd.showSearch" label-width="68px">
      <el-form-item  label="厂区名称" prop="factoryId">
        <el-select ref="factories"  v-model="pd.queryParams.factoryId" @click="getFactory()" placeholder="请选择厂区" clearable>
          <el-option  
              v-for="factory in pd.workShopLineListFactory"
              :key="factory.name"
              :label="factory.name"
              :value="factory.id"
          />
          </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input
            v-model="pd.queryParams.name"
            placeholder="请输入名称"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="负责人" prop="userId">
        <el-input
            v-model="pd.queryParams.userId"
            placeholder="请输入负责人"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否启用" prop="enableFlag">
        <el-select v-model="pd.queryParams.enableFlag" placeholder="请选择是否启用" clearable>
          <el-option
              v-for="dict in sys_is"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="更新时间" style="width: 308px">
        <el-date-picker
            v-model="pd.daterangeUpdateTime"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAddFactory()"
            v-hasPermi="['wms:workShopLine:add']"
        >新增厂区</el-button> 
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd()"
            v-hasPermi="['wms:workShopLine:add']"
        >新增车间</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="info"
            plain
            icon="Sort"
            @click="toggleExpandAll"
        >展开/折叠</el-button>
      </el-col>

      <el-form-item label="测试" >
      <WorkShopLineSearch :title="workShopLineSearchParam.title" :isSingle="workShopLineSearchParam.isSingle"
          :workShopLine=workShopLineSearchParam.workShopLine @selectd="workShopLineSelectd"></WorkShopLineSearch>
    </el-form-item>

      <right-toolbar v-model:showSearch="pd.showSearch " @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
        v-if="refreshTable"
        v-loading="pd.loading"
        :data="pd.workShopLineList"
        row-key="id"
        :default-expand-all="isExpandAll"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column label="父id" prop="parentId" />
      <el-table-column label="名称" align="center" prop="name" >
        <template #default="scope">
          <span v-if="(scope.row.ancestors).split(',').length === 2"   style="color: rgb(13, 131, 177); font-weight: bold;" >{{ scope.row.name }}</span>
          <span v-else-if="(scope.row.ancestors).split(',').length === 3"   style="color: rgb(68, 36, 199);" >{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="祖籍" align="center" prop="ancestors" />
      <el-table-column label="面积" align="center" prop="area" />
      <el-table-column label="负责人" align="center" prop="userId" />
      <el-table-column label="是否启用" align="center" prop="enableFlag">
        <template #default="scope">
          <dict-tag :options="sys_is" :value="scope.row.enableFlag"/>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="创建者" align="center" prop="createBy" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新者" align="center" prop="updateBy" />
      <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="190" label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope" >
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['wms:workShopLine:edit']">修改</el-button>
          <el-button link type="primary" icon="Plus" v-show="(scope.row.ancestors).split(',').length === 2" @click="handleAdd(scope.row)" v-hasPermi="['wms:workShopLine:add']">新增车间</el-button>
          <el-button link type="primary" icon="Plus" v-show="(scope.row.ancestors).split(',').length === 3" @click="handleAdd(scope.row)" v-hasPermi="['wms:workShopLine:add']">新增流水线</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['wms:workShopLine:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
        <!-- <pagination
          v-show="pd.total > 0"
          :total="pd.total"
          v-model:page="pd.queryParams.pageNum"
          v-model:limit="pd.queryParams.pageSize"
          @pagination="getList"
      /> -->
      <WorkShopLineCurd ref ="workShopLineRef" @ok="workShopLineCurdOk"></WorkShopLineCurd>
  </div>
</template>

<script setup name="WorkShopLine">
import { listWorkShopLine, getWorkShopLine } from "@/api/wms/workShopLine";
import WorkShopLineSearch from "@/views/wms/workShopLine/search"
import { useRoute } from "vue-router";
const route = useRoute();

import WorkShopLineCurd from "@/views/wms/workShopLine/curd"  
import { getCurrentInstance, reactive,} from "vue";
const { proxy } = getCurrentInstance();
const { sys_is,wms_workshop_line } = proxy.useDict('sys_is','wms_workshop_line');

const isExpandAll = ref(true);
const refreshTable = ref(true);

const pd = reactive({
  showSearch: true,
  operation: 0,
  loading: true,
  daterangeUpdateTime: [],
  workShopLineList: [],
  workShopLineListFactory: [],
  form: {},
  ids: [],
  total: 0,
  workShopLineOptions: [],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: null,
    ancestors: null,
    userId: null,
    parentId: null,
    enableFlag: null,
    updateTime: null,
    factoryId: null,
    params: {}
  },
  rules: {
    parentId: [
      { required: true, message: "父id不能为空", trigger: "blur" }
    ],
    name: [
      { required: true, message: "名称不能为空", trigger: "blur" }
    ],
    enableFlag: [
      { required: true, message: "是否启用不能为空", trigger: "change" }
    ],
  }
});


/** 查询厂区|生产车间l生产流水线列表 */
function getList() {
  pd.loading = true;
  pd.queryParams.params = {};
  if (null != pd.daterangeUpdateTime && '' != pd.daterangeUpdateTime) {
    pd.queryParams.params.beginUpdateTime = pd.daterangeUpdateTime[0];
    pd.queryParams.params.endUpdateTime = pd.daterangeUpdateTime[1];
  }
  listWorkShopLine(pd.queryParams).then(response => {
    pd.workShopLineList = proxy.handleTree(response.data, "id", "parentId")
    pd.loading = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    parentId: null,
    name: null,
    ancestors: null,
    area: null,
    userId: null,
    enableFlag: null,
    tenantId: null,
    remark: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
  };
  proxy.resetForm("workShopLineRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  pd.queryParams.params = {}
  pd.daterangeUpdateTime = []
  proxy.resetForm("queryRef");
  handleQuery();

}

/** 新增车间/流水线按钮操作 */
async function handleAdd(row) {
  const factoryId = proxy.$refs.factories
  proxy.$refs["workShopLineRef"].add(row, proxy.$refs.factories.selected.value);
}
/** 新增厂区按钮操作 */
function handleAddFactory() {
  proxy.$refs["workShopLineRef"].addFactory()
}

/** 展开/折叠操作 */
function toggleExpandAll() {
  refreshTable.value = false;
  isExpandAll.value = !isExpandAll.value;
  nextTick(() => {
    refreshTable.value = true;
  });
}

/** 修改按钮操作 */
function handleUpdate(row) {
  const _id = row.id || pd.ids
  getWorkShopLine(_id).then(response => {
   proxy.$refs["workShopLineRef"].update(response.data)
  });
}


/** 删除按钮操作 */
function handleDelete(row) {
 //const _ids = row.id || pd.ids
 proxy.$refs["workShopLineRef"].del(row.id)
}

//刷新页面
function workShopLineCurdOk(operation) {
  getList();
}

//获取所有工厂名称
function getFactory() {
  pd.queryParams.parentId = 0
  listWorkShopLine(pd.queryParams).then(response => {
    debugger
    pd.workShopLineListFactory = response.data
  });
  pd.queryParams.parentId = null;
}


const workShopLineSearchParam = reactive({
  title: "厂区查找",
  isSingle: true,
  workShopLine: {
    params: {
      isLead: "1"
    }
  }
})

getList();
</script>
